<template>
  <div class="com-full frame com-flex-c com-center-r">
    <div class="line"></div>
    <div
      v-for="(item, index) in list"
      :key="index"
      :class="['dot_tab com-flex-c ', { active_dot: index === change }]"
      @click="changClick(item, index)"
    >
      <div class="com-flex-r com-center">
        <img src="/imgs/32.png" />
        <div class="name-line">
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="dashed"></div>
    </div>
  </div>
</template>

<script setup>
import ueMsg from "/public/js/app.js";
import bus from "@/utils/bus.js";
import { onMounted, ref } from "vue";
import { useParamsStore } from "@/stores/params.js";

const paramsStore = useParamsStore();
const change = ref(0);
const list = ref([{ name: "智慧园区", ueId: 1 }]);
const ueIdMap = window.config.ueIdMap;
const changClick = (item, index) => {
  list.value = list.value.filter((_item, i) => i > index - 1);
  change.value = 0;
  ueMsg.apiSend({ PoiHierarchyStatus: item.ueId });
  changePrams(item.ueId);
};
const changePrams = (e) => {
  const length = (e + "").split("-").length;

  // 判断点击的层级，目前只支持数据下钻到机房级别
  if (length < 4) {
    const addressId = paramsStore.getAddressFromUeId(e);
    paramsStore.setParamsAll({ type: length, addressId, ueId: e });
  }
};
// 监听UE场景内层级切换，保存记录
const PoiHierarchyStatus = (e) => {
  const exList = list.value.some((item) => item.ueId === e);
  console.log("test", exList);
  if (!exList) {
    const dataSplit = (e + "").split("-");
    const length1 = (list.value?.[0]?.ueId + "").split("-");
    console.log("length:", length1.length, dataSplit.length);
    if (length1.length === dataSplit.length) {
      list.value[0].name = dataSplit[3];
      list.value[0].ueId = e;
    } else {
      switch (dataSplit.length) {
        case 2:
          list.value = [
            {
              name: ueIdMap[e],
              ueId: e,
            },
            ...list.value,
          ];
          break;
        case 3:
          list.value = [
            {
              name: e === "1-1-1" ? "机房" : dataSplit[2],
              ueId: e,
            },
            ...list.value,
          ];
          break;
        case 4:
          list.value = [
            {
              name: dataSplit[3],
              ueId: e,
            },
            ...list.value,
          ];
          break;
        case 5:
          list.value = [
            {
              name: "机柜" + dataSplit[4],
              ueId: e,
            },
            ...list.value,
          ];
          break;
      }
    }
  }
  changePrams(e);
};
onMounted(() => {
  bus.on("PoiHierarchyStatus", PoiHierarchyStatus);
});
</script>

<style lang="scss" scoped>
.frame {
  background: url("/imgs/33.png");
  background-size: 100% 90%;
  background-repeat: no-repeat;
  background-position: 0;
  padding: 60px 0 60px 20px;
  box-sizing: border-box;
  justify-content: flex-end;

  .line {
    margin-left: 28px;
    width: 202px;
    height: 0px;
    border-bottom: 2px solid rgba(0, 186, 255, 0.31);
  }

  .dot_tab {
    margin-left: 12px;
    pointer-events: all;
    cursor: pointer;

    // border-width: 194px;
    img {
      margin-right: 18px;
      width: 14px;
      height: 11px;
    }

    .name-line {
      width: 194px;
      height: 53px;

      span {
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #96b9dd;
        line-height: 55px;
        letter-spacing: 1.2px;
      }
    }

    .dashed {
      margin-left: 20px;
      width: 194px;
      height: 0px;
      border: 0.5px dashed rgba(0, 186, 255, 0.31);
    }
  }

  .active_dot {
    background: url("/imgs/29.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>
